import './WJHDataAnalysis.scss'

import dayjs from 'dayjs'

import { useEffect, useRef, useState } from 'react'
import { useMount, useRequest, useSize } from 'ahooks'

import { DatePicker, Select } from 'antd'
import { DualAxesStyle, DualAxesA02Template } from './AssetsCharts'
import { Http } from '../../../../Common/Api'

export const WJHDataAnalysisA01 = ({ WJHEvent }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [ChartsData, setChartsData] = useState([])

    const [Time, setTime] = useState(dayjs())

    const [DevList, setDevList] = useState()
    const [Active, setActive] = useState()

    const { runAsync: getDevList } = useRequest(Http, { manual: true })

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            setChartsData(
                res.data.map(({ receiveTime, speed, temperature }) => ({
                    type: dayjs(receiveTime).format('HH:mm:ss'),
                    温度: temperature,
                    速度: speed,
                })),
            )
        },
    })

    useMount(() => {
        getDevList({ url: 'getWJHscreenPavRollApi' }).then(res => {
            const devicesList = res.data.map(({ clazz, deviceName, deviceNo }) => ({
                label: deviceName,
                value: deviceNo,
                clazz,
            }))
            setDevList(devicesList)
            setActive(devicesList[0].value)
        })
    })

    useEffect(() => {
        if (DevList && Active) {
            const { clazz } = DevList.find(v => v.value === Active)
            WJHEvent.emit({ type: 'devType', data: clazz })
            runAsync({
                url: 'getWJHspeedTemperatureList',
                data: { deviceNo: Active, clazz, date: dayjs(Time).format('YYYY-MM-DD') },
            })
        }
    }, [runAsync, DevList, Active, Time, WJHEvent])

    return (
        <div className="WJHDataAnalysisA01">
            <div>
                <DatePicker value={Time} onChange={setTime} />
                <Select value={Active} options={DevList} onChange={setActive} />
            </div>
            <div ref={ChartsBox}>
                {size && (
                    <DualAxesA02Template
                        size={size}
                        data={ChartsData}
                        style={{
                            ...DualAxesStyle,
                            value: '温度',
                            count: '速度',
                            YTitleValue: '℃',
                            YTitleCount: 'km/h',
                        }}
                    />
                )}
            </div>
        </div>
    )
}
